<template>
	<view v-if="onOff" class="hAndW100 fixed">
		<swiper class="hAndW100" style="overflow: hidden;" :current="point" @change="changeSwiper">
			<swiper-item class="SwiperItem" v-for="(item,index) in data">
				<movable-area class="hAndW100 overhideAu">
					<movable-view class="hAndW100 displayIJcenter overhideAu" direction="all" :animation="false" scale
						out-of-bounds :scale-value="scaleValue" :scale-min="0.8" :scale-max="4" @scale="scale">
						<image :src="(urlName?item[urlName]:item)" mode="aspectFit" class="hAndW100"></image>
					</movable-view>
				</movable-area>
			</swiper-item>
		</swiper>
		<uv-icon class="close-icon" name="close" color="#fff" size="28" @click="close"></uv-icon>
		<uv-icon class="refresh-icon" name="reload" color="#fff" size="34" @click="scaleValue=1"></uv-icon>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	const emit = defineEmits(['accept'])
	const props = defineProps({
		data: {
			type: Array,
			default: []
		},

		point: {
			type: Number,
			default: 0
		},

		// 图片字段名
		urlName: {
			type: String,
			default: ''
		},

		//开关
		onOff: {
			type: Boolean,
			default: false
		}
	})

	const scaleValue = ref(1)


	const scale = (e) => {
		scaleValue.value = e.detail.scale
	}

	const changeSwiper = (current) => {
		scaleValue.value = 1
	}

	const close = () => {
		emit('accept')
	}
</script>

<style lang="scss" scoped>
	uni-page-body {
		width: 100vw;
		height: 100vh;
	}

	.overhideAu {
		overflow: auto;
		white-space: normal;

	}

	.SwiperItem {
		overflow: scroll;
		touch-action: auto;
		position: relative;
	}

	.close-icon {
		position: absolute;
		right: 8vw;
		top: 10vh;
	}

	.refresh-icon {
		position: absolute;
		left: calc(50vw - 17rpx);
		bottom: 10vh;
	}

	.hAndW100 {
		width: 100vw;
		height: 100vh;

	}

	.fixed {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999;
		background: rgba(0, 0, 0, 1);
	}

	.displayIJcenter {
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>